<script setup lang="ts">
import type { StatisticsModel } from '@/composables/useStatistic'
import Decimal from 'decimal.js'

const props = withDefaults(
  defineProps<{
    title?: string
    subtitle?: string
    bgColor?: string
    showTotal?: boolean
    homeShowTotal?: boolean
    type?: string
    data?: any[]
    totalData?: StatisticsModel /** 总数据 */
    showUnit?: string /** 显示单位 */
    radioType?: string /** 存储 切换 tab */
    icon?: any
  }>(),
  {
    title: '',
    subtitle: '',
    type: '',
    showTotal: false,
    homeShowTotal: false,
  },
)

const shouldShowTooltip = ref<boolean>(false)

const textContainer = ref()

function checkIfTruncated(event: MouseEvent) {
  // @ts-ignore
  shouldShowTooltip.value
    = event.target.scrollHeight > event.target.clientHeight
}

function onMouseleave() {
  shouldShowTooltip.value = false
}

const percent = computed(() => {
  const rate
    = props?.title === '存储' && props?.radioType === 'realAllocate'
      ? props?.totalData?.real_allocated_rate
      : props?.totalData?.allocation_rate || 0
  return Number(Decimal.div(Number(rate), 100).toFixed(2))
})
</script>

<template>
  <div
    class="flex flex-col gap-y-3 rounded-xl p-3"
    :style="{ backgroundColor: `${bgColor}` }"
  >
    <header
      v-if="title"
      class="h-11 flex items-center justify-between px-3"
    >
      <slot name="title">
        <div class="flex items-center gap-x-2">
          <component
            :is="icon"
            class="size-5!"
          />
          <span class="text-sm font-700">{{ title }}</span>
        </div>
      </slot>
      <slot name="customBtn" />
    </header>
    <div
      v-if="subtitle || showTotal"
      class="w-full overflow-hidden px-3"
      :class="{ 'bg-white/60 rounded-md pb-3': homeShowTotal }"
    >
      <slot
        v-if="subtitle"
        name="subtitle"
      >
        <a-tooltip
          :content="subtitle"
          position="top"
          :popup-visible="shouldShowTooltip"
        >
          <div
            ref="textContainer"
            class="line-clamp-1 w-full pt-3 text-xs font-700"
            :class="{ 'mb-6': showTotal || homeShowTotal }"
            @mouseenter="checkIfTruncated"
            @mouseleave="onMouseleave"
          >
            {{ subtitle }}
          </div>
        </a-tooltip>
      </slot>
      <div
        v-if="showTotal || homeShowTotal"
        class="flex flex-col gap-y-2"
      >
        <div class="flex items-center justify-between">
          <div class="flex flex-1 flex-col gap-y-2">
            <span class="text-xs text-color-3">总{{ type }}</span>
            <span class="text-sm font-700">{{ totalData?.total || 0 }}{{ showUnit || '' }}</span>
          </div>
          <div class="flex flex-1 flex-col gap-y-2 text-center">
            <span class="text-xs text-color-3">{{
              title === '存储' && radioType === 'realAllocate'
                ? '实际使用'
                : '已分配'
            }}</span>
            <span class="text-sm font-700">
              {{
                title === '存储' && radioType === 'realAllocate'
                  ? totalData?.real_allocated
                  : totalData?.allocated || 0
              }}{{ showUnit || '' }}
            </span>
          </div>
          <div class="flex flex-1 flex-col gap-y-2 text-right">
            <span class="text-xs text-color-3">{{
              title === '存储' && radioType === 'realAllocate'
                ? '使用率'
                : '分配率'
            }}</span>
            <span
              class="text-sm font-700"
              :class="Number(percent) >= 0.9 ? 'text-color-danger' : ''"
            >
              {{
                title === '存储' && radioType === 'realAllocate'
                  ? totalData?.real_allocated_rate
                  : totalData?.allocation_rate || 0
              }}%
            </span>
          </div>
        </div>
        <a-progress
          :percent="percent"
          :show-text="false"
          :stroke-width="3"
          :status="Number(percent) >= 0.9 ? 'danger' : 'normal'"
          track-color="rgba(0, 0, 0, 0.05)"
        />
      </div>
    </div>
    <div
      v-if="showTotal"
      class="rounded-md bg-white/60 p-3"
      :class="subtitle ? 'resource_statistic' : 'resource_total_statistic'"
    >
      <header
        class="flex items-center justify-between text-xs text-color-3 space-x-2"
      >
        <span class="flex-1">应用</span>
        <span class="flex-1 text-center">已分配</span>
        <span class="flex-1 text-right">分配率</span>
      </header>
      <a-divider
        class="border-color-2 my-4!"
        type="dashed"
      />
      <div
        v-if="!data?.length"
        class="min-h-60px flex items-center justify-center"
      >
        <span class="text-xs text-color-3">暂无数据</span>
      </div>
      <template
        v-for="item in data"
        v-else
        :key="item?.app_id"
      >
        <div class="mt-4 flex items-center justify-between text-xs space-x-2">
          <text-ell class="flex-1 leading-4!">
            {{ item?.app_name }}
          </text-ell>
          <span class="flex-1 text-center">{{
            title === '存储' && radioType === 'realAllocate'
              ? '-'
              : item?.allocated
          }}{{
            title === '存储' && radioType === 'realAllocate'
              ? ''
              : showUnit || ''
          }}</span>
          <span
            class="flex-1 text-right"
            :class="
              item?.allocation_rate && Number(item?.allocation_rate) >= 90
                ? 'text-color-danger'
                : ''
            "
          >{{
            title === '存储' && radioType === 'realAllocate'
              ? '-'
              : `${item?.allocation_rate}%`
          }}</span>
        </div>
      </template>
    </div>
    <div
      v-if="!showTotal && !homeShowTotal"
      class="rounded-md bg-white/60 p-3"
      :class="subtitle ? 'dashboard_statistic' : 'dashboard_total_statistic'"
    >
      <header
        class="flex items-center justify-between text-xs text-color-3 space-x-2"
      >
        <span class="min-w-24 flex-1">区域</span>
        <span class="flex-1">总{{ type }}</span>
        <span class="flex-1">{{
          title === '存储' && radioType === 'realAllocate'
            ? '实际使用'
            : '已分配'
        }}</span>
        <span class="w-50px text-right">{{
          title === '存储' && radioType === 'realAllocate'
            ? '使用率'
            : '分配率'
        }}
        </span>
      </header>
      <a-divider
        class="border-color-2 my-4!"
        type="dashed"
      />
      <div
        v-if="!data?.length"
        class="min-h-60px flex items-center justify-center"
      >
        <span class="text-xs text-color-3">暂无数据</span>
      </div>
      <template
        v-for="item in data"
        v-else
        :key="item.region_id"
      >
        <div class="mt-4 flex items-center justify-between text-xs space-x-2">
          <text-ell class="min-w-24 flex-1 leading-4!">
            {{ item?.region_name || '-' }}
          </text-ell>
          <span class="flex-1"> {{ item?.total }}{{ showUnit || '' }} </span>
          <span class="flex-1">
            {{
              title === '存储' && radioType === 'realAllocate'
                ? item?.real_allocated
                : item?.allocated
            }}{{ showUnit || '' }}
          </span>
          <span
            class="w-50px text-right"
            :class="
              (item?.allocation_rate && Number(item?.allocation_rate) >= 90)
                || (item?.real_allocated_rate
                  && Number(item?.real_allocated_rate) >= 90)
                ? 'text-color-danger'
                : ''
            "
          >
            {{
              title === '存储' && radioType === 'realAllocate'
                ? item?.real_allocated_rate
                : item?.allocation_rate
            }}%
          </span>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped lang="less">
:deep(.dashboard_statistic) {
  height: calc(100% - 40px);
}
:deep(.dashboard_total_statistic) {
  height: calc(100% - 56px);
}
:deep(.resource_statistic) {
  height: calc(100% - 119px);
}
:deep(.resource_total_statistic) {
  height: calc(100% - 123px);
}
</style>
